<template>
  <div class="flex w-full h-full">
    <div class="box flex flex-col" @dragenter.self="handleContainerDragenter">
      <div
        :class="{'on-drag': item.onDrag}"
        @dragstart="handleDragstart($event, item)"
        @dragend="handleDragend($event, item)"
        @dragenter="handleDragenter($event, item)"
        ref="items"
        class="item"
        v-for="item in items"
        :key="item.id">
        {{ item.id }}
      </div>
    </div>
    <!--<div class="box flex flex-col" @dragenter.self="handleContainerDragenter">-->
    <!--  <div-->
    <!--    :class="{'on-drag': item.onDrag}"-->
    <!--    @dragstart="handleDragstart($event, item)"-->
    <!--    @dragend="handleDragend($event, item)"-->
    <!--    @dragenter="handleDragenter($event, item)"-->
    <!--    ref="items"-->
    <!--    class="item"-->
    <!--    v-for="item in items2"-->
    <!--    :key="item.id">-->
    <!--    {{ item.id }}-->
    <!--  </div>-->
    <!--</div>-->
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator"

interface DragItem {
  id: number,
  order: number,
  onDrag: boolean
}

@Component
export default class Drag extends Vue {
  items: DragItem[] = [
    {id: 1, order: 1, onDrag: false},
    {id: 2, order: 2, onDrag: false},
    {id: 3, order: 3, onDrag: false},
    {id: 4, order: 4, onDrag: false},
  ]

  items2: DragItem[] = [
    {id: 5, order: 5, onDrag: false},
    {id: 6, order: 6, onDrag: false},
    {id: 7, order: 7, onDrag: false},
    {id: 8, order: 8, onDrag: false},
  ]


  $refs!: {
    items: HTMLDivElement[]
  }

  tempItem!: DragItem
  tempIndex!: number

  mounted(): void {
    console.log(this)
    this.$refs.items.forEach(item => {
      item.draggable = true
    })
  }

  handleDragstart(e: DragEvent, item: DragItem): void {
    console.log("start", e)
    item.onDrag = true
    this.tempItem = item
    this.tempIndex = this.items.findIndex(ret => ret.id === item.id)
  }

  handleDragend(e: DragEvent, item: DragItem): void {
    console.log("end", e)
    item.onDrag = false
  }

  handleDragenter(e: DragEvent, item: DragItem): void {
    const index = this.items.findIndex(ret => ret.id === item.id)
    if(index === this.tempIndex){
      return
    }else if(index < this.tempIndex){
      const part1 = this.items.slice(0, index)
      const part2 = [this.tempItem]
      const part3 = this.items.slice(index, this.tempIndex)
      const part4 = this.items.slice(this.tempIndex + 1)
      this.$nextTick(()=>{
        console.log([...part1, ...part2, ...part3, ...part4])
        this.items = [...part1, ...part2, ...part3, ...part4]
        this.tempIndex = part1.length
      })
      console.log(this.items)
      console.log("enter", e)
    }else if(index > this.tempIndex){
      const part1 = this.items.slice(0, this.tempIndex)
      const part2 = this.items.slice(this.tempIndex + 1, index + 1)
      const part3 = [this.tempItem]
      const part4 = this.items.slice(index + 1)
      this.items = [...part1, ...part2, ...part3, ...part4]
      this.tempIndex = part1.length + part2.length
    }

  }

  handleContainerDragenter(e: DragEvent):void {
    console.log("container")
    console.log(e)
  }
}
</script>

<style scoped lang="scss">
.box {
  user-select: none;
  margin: 20px;
  width: 300px;
  height: 800px;
  border: 1px solid #ccc;

  .item {
    height: 40px;
    margin: 3px;
    border-radius: 5px;
    background-color: skyblue;
    cursor: move;
    //&:hover{
    //  background-color: royalblue;
    //}
  }

  .on-drag {
    border: 1px dashed red;
  }

}
</style>
